<section class="card">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:1rem;">
        <div>
            <h3 style="margin:0;">🤖 智能助教对话</h3>
            <p style="margin:0.5rem 0 0 0;color:var(--text-secondary);font-size:0.9375rem;">
                与 AI 助教交流，获得个性化的解题指导和知识点讲解
            </p>
        </div>
        {% if can_view_llm %}
        <div style="display:flex;gap:0.5rem;align-items:center;">
            {% if mistake.llm_conversation_id %}
            <span class="pill success" id="conversation-status">
                🟢 会话进行中
            </span>
            <button class="button small secondary" id="load-more-messages" style="display:none;">
                加载更多消息
            </button>
            {% else %}
            <span class="pill" id="conversation-status">
                ⚪ 未开始会话
            </span>
            {% endif %}
            <button class="button small secondary" id="load-more-messages" style="display:none;">
                加载更多消息
            </button>
        </div>
        {% endif %}
    </div>
    
    <div style="display:grid;gap:1.5rem;{% if can_manage_llm %}grid-template-columns:2fr 1fr;{% endif %}">
        <div>
            {% if can_view_llm %}
            <div style="background:var(--accent-soft);border:1px solid var(--accent-light);border-radius:var(--radius-md);padding:1rem;margin-bottom:1rem;">
                <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem;">
                    <div style="display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;">
                        <span style="font-size:0.875rem;color:var(--text-secondary);">
                            💬 会话 ID:
                            <code
                                id="conversation-id-display"
                                data-full-id="{{ mistake.llm_conversation_id }}"
                                style="background:var(--surface);padding:0.125rem 0.5rem;border-radius:var(--radius-sm);font-size:0.8125rem;"
                            >
                                {{ mistake.llm_conversation_id }}
                            </code>
                        </span>
                        <span style="font-size:0.875rem;color:var(--text-secondary);" id="message-count">
                            📝 消息数: <strong>{{ llm_messages|length }}</strong>
                        </span>
                    </div>
                    <div style="display:flex;gap:0.5rem;">
                        {% if can_manage_llm %}
                        <button class="button small secondary" id="start-new-conversation" title="开启新的助教会话">
                            ✨ 新建会话
                        </button>
                        {% endif %}
                        <button class="button small secondary" id="show-conversations" title="查看所有会话">
                            📋 会话列表
                        </button>
                        <button class="button small secondary" id="refresh-messages">
                            🔄 刷新消息
                        </button>
                    </div>
                </div>
            </div>
            {% endif %}
            
            {% if can_review_llm and not can_manage_llm %}
            <div id="llm-feedback" class="message" style="display:none;margin-bottom:1rem;"></div>
            {% endif %}
            
            <div id="conversations-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;padding:2rem;">
                <div style="max-width:800px;margin:0 auto;background:var(--surface-elevated);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-height:80vh;overflow:hidden;display:flex;flex-direction:column;">
                    <div style="padding:1.5rem;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;">
                        <h3 style="margin:0;">📋 我的会话列表</h3>
                        <button class="button small secondary" id="close-conversations-modal">✕ 关闭</button>
                    </div>
                    <div style="padding:1.5rem;overflow-y:auto;flex:1;">
                        <div id="conversations-list" style="display:grid;gap:1rem;">
                            <div style="text-align:center;padding:2rem;color:var(--text-secondary);">
                                <div class="spinner" style="margin:0 auto 1rem;"></div>
                                <p>加载中...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="chat" id="conversation" style="max-height:600px;overflow-y:auto;padding-right:0.5rem;">
                {% if llm_error %}
                    <div class="message message-error">{{ llm_error }}</div>
                {% endif %}
                <div id="messages-container">
                    {% for message in llm_messages %}
                        <div class="chat-entry {{ message.sender }}" data-message-id="{{ message.id }}">
                            <strong>
                                {% if message.sender == "student" %}
                                    👤 学生
                                {% elif message.sender == "teacher" %}
                                    👨‍🏫 老师
                                {% else %}
                                    🤖 智能助教
                                {% endif %}
                            </strong>
                            <small>{{ message.created_at|date:"Y-m-d H:i:s" }}</small>
                            <div class="message-content" data-raw="{{ message.content|escape }}">
                                {{ message.content|linebreaks }}
                            </div>
                        </div>
                    {% empty %}
                        <div style="text-align:center;padding:3rem 2rem;" id="empty-state">
                            <div style="font-size:3rem;margin-bottom:1rem;opacity:0.3;">💬</div>
                            <p style="margin:0;color:var(--text-secondary);">
                                还没有对话记录，向智能助教提问吧！
                            </p>
                        </div>
                    {% endfor %}
                </div>
                <div id="loading-indicator" style="display:none;text-align:center;padding:1rem;">
                    <div style="display:inline-flex;align-items:center;gap:0.5rem;color:var(--text-secondary);">
                        <span class="spinner" style="width:16px;height:16px;border-width:2px;"></span>
                        <span>正在加载...</span>
                    </div>
                </div>
            </div>
        </div>

        {% if user.is_student and mistake.student_id == user.id %}
        <div id="llm-sidebar">
            <form id="llm-form" method="post" action="{% url 'learning:mistake_ask_llm' mistake.pk %}">
                {% csrf_token %}
                <h4 style="margin:0 0 1rem 0;color:var(--text-primary);">💭 向助教提问</h4>
                <textarea name="question" id="id_question" rows="5" placeholder="请描述你不理解的地方，例如：&#10;- 为什么这一步要用这个公式？&#10;- 我的思路哪里出错了？&#10;- 这类题目有什么解题技巧？" required></textarea>
                <div style="display:flex;gap:0.5rem;margin-bottom:1rem;">
                    <button class="button" type="submit" style="flex:1;">
                        <span id="submit-text">发送问题</span>
                        <span id="submit-loading" style="display:none;">
                            <span class="spinner" style="width:14px;height:14px;border-width:2px;"></span>
                        </span>
                    </button>
                    <button class="button secondary" type="button" id="clear-input" title="清空输入">
                        🗑️
                    </button>
                </div>
                <div id="llm-feedback" class="message" style="display:none;"></div>
                
                <div style="margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-subtle);">
                    <p style="margin:0 0 0.5rem 0;font-size:0.875rem;color:var(--text-secondary);font-weight:600;">💡 快捷提问：</p>
                    <div style="display:flex;flex-direction:column;gap:0.5rem;">
                        <button type="button" class="button small secondary quick-question" data-question="请帮我分析这道题的考点和解题思路">
                            🎯 分析考点
                        </button>
                        <button type="button" class="button small secondary quick-question" data-question="我的解题思路哪里出错了？">
                            ❓ 找出错误
                        </button>
                        <button type="button" class="button small secondary quick-question" data-question="请给我讲解一下相关的知识点">
                            📚 讲解知识点
                        </button>
                        <button type="button" class="button small secondary quick-question" data-question="这类题目有什么常见的解题技巧？">
                            ✨ 解题技巧
                        </button>
                    </div>
                </div>
            </form>
            
            {% if mistake.llm_conversation_id %}
            <form id="llm-reset-form" method="post" action="{% url 'learning:mistake_reset_llm' mistake.pk %}">
                {% csrf_token %}
                <p style="font-size:0.875rem;">开始新的提问前，可清除当前会话记录以获得更专注的解答。</p>
                <button class="button small secondary" type="submit" style="width:100%;" onclick="return confirm('确定要清空对话记录吗？此操作不可撤销。');">
                    🗑️ 清空对话记录
                </button>
            </form>
            {% endif %}
        </div>
        {% endif %}
    </div>
</section>
